<script lang="ts" setup>
import CheckBoxLayout from './checkbox-layout.vue'
import LayoutDark from './layout-dark.vue'
import CheckboxTheme from './checkbox-theme.vue'
import type { ThemeType } from '@/config/theme'



const props = withDefaults(defineProps<{
  layout?: string
  layoutStyle?: 'light' | 'dark'
  themeList?: ThemeType[]
  theme?: string
}>(), {
})


const emit = defineEmits(['update:layout', 'update:layoutStyle', 'update:theme'])

const visible = ref(false)



</script>

<template>
  <teleport to="body">
    <div class="fixed top-240px right-0 z-10 " @click="visible = true">
      <el-button type="primary" class="b-rd-tr-0! b-rd-br-0!" size="large">
        <template #icon>
          <el-icon>
            <Setting />
          </el-icon>
        </template>
      </el-button>
    </div>
  </teleport>




  <el-drawer v-model="visible" title="系统配置" direction="rtl" :size="400">

    <!-- 布局主题 -->
    <CheckBoxLayout :layout="layout" @click="(e) => $emit('update:layout', e)"></CheckBoxLayout>

    <!-- 主题切换 -->
    <LayoutDark :layoutStyle="layoutStyle" @click="(e) => $emit('update:layoutStyle', e)"></LayoutDark>

    <!-- 切换主题色 -->
    <div class='flex justify-between'>
      <CheckboxTheme @click="(e) => $emit('update:theme', e)" v-for="(item, index) in themeList" :key="index"
        :color='item.color' :title='item.title' :themeKey='item.key'></CheckboxTheme>
    </div>

    <!-- 侧边关闭按钮 -->
    <div class="fixed  top-240px right-[400px] z-2500! animate__animated animate__bounce" style="transition: all 0.4;"
      @click="visible = false">

      <el-button type="primary" class="b-rd-tr-0! b-rd-br-0!" size="large">
        <template #icon>
          <el-icon>
            <Close />
          </el-icon>
        </template>
      </el-button>




    </div>

  </el-drawer>




</template>
